/* 系统角色页面 */
<template>
  <zero-container v-loading="dataListLoading">
    <!-- 头部信息-start -->
    <!-- 右边信息-start -->
    <div slot="tool">
      <el-collapse-transition>
        <div v-show="showSearch">
          <el-form :inline="true"
                   :model="searchForm">
            <el-form-item label="角色名称">
              <el-input v-model="searchForm.name"
                        clearable
                        size="small" />
            </el-form-item>
            <el-form-item>
              <el-button type="success"
                         icon="el-icon-search"
                         @click="searchSubmit()"
                         round
                         size="small">搜索</el-button>
              <el-button icon="el-icon-refresh"
                         type="warning"
                         @click="searchResetForm()"
                         round
                         size="small">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-collapse-transition>

      <el-button v-if="$hasPermission(mixinViewModuleOptions.addUrl)"
                 type="primary"
                 @click="initDialog('addUpdateDialogRef')"
                 size="small">新增</el-button>
      <el-button v-if="$hasPermission(mixinViewModuleOptions.deleteUrl)"
                 type="danger"
                 @click="deleteHandle()"
                 :disabled="batchBtnDisabled"
                 size="small">批量删除</el-button>
      <el-button-group style="float: right;">
        <el-button @click="showSearch = !showSearch"
                   title="显示/隐藏搜索"
                   icon="fa fa-search"
                   size="small" />
        <el-dropdown trigger="click"
                     :hide-on-click="false">
          <el-button title="列"
                     icon="fa fa-th"
                     class="zero-column-dropdown"
                     size="small" />
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item key="all"
                              label="all">
              <el-checkbox key="all"
                           v-model="cloumn_all_checked"
                           v-on:click.stop.native
                           label="all"
                           @change="cloumnAllChecked">全选</el-checkbox>
            </el-dropdown-item>
            <hr />
            <el-checkbox-group v-model="checkedTableColumns">
              <el-dropdown-item v-for="(column,i) in showColumns"
                                :key="i"
                                :label="i">
                <el-checkbox :key="i"
                             :label="i">{{ column.label }}</el-checkbox>
              </el-dropdown-item>
            </el-checkbox-group>
          </el-dropdown-menu>
        </el-dropdown>
      </el-button-group>
    </div>
    <div slot="main"
         style="height: 100%">
      <el-table :ref="ref"
                height="100%"
                border
                :data="dataList"
                @selection-change="dataListSelectionChangeHandle"
                @sort-change="dataListSortChangeHandle"
                style="width: 100%">
        <el-table-column type="selection"
                         header-align="center"
                         align="center"
                         width="50" />
        <el-table-column v-if="showColumns.name.show"
                         prop="name"
                         label="角色名称"
                         sortable="custom"
                         header-align="center"
                         align="center" />
        <!-- 状态特殊处理 -->
        <el-table-column v-if="showColumns.state.show"
                         prop="state"
                         label="角色状态"
                         sortable="custom"
                         header-align="center"
                         align="center">
          <template slot-scope="scope">
            <el-tooltip :content="scope.row.state==='ENABLE'?'点击禁用':'点击启用'"
                        placement="top">
              <el-switch v-model="scope.row.state"
                         active-value="ENABLE"
                         inactive-value="DISABLE"
                         @change="changeState(scope.row)" />
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column v-if="showColumns.createTime.show"
                         prop="createTime"
                         label="创建时间"
                         sortable="custom"
                         header-align="center"
                         align="center"
                         min-width="180"
                         :formatter="dateFormat" />
        <el-table-column v-if="showColumns.updateTime.show"
                         prop="updateTime"
                         label="修改时间"
                         sortable="custom"
                         header-align="center"
                         align="center"
                         min-width="180"
                         :formatter="dateFormat" />
        <el-table-column v-if="showColumns.remarks.show"
                         prop="remarks"
                         label="备注"
                         header-align="center"
                         align="center" />
        <el-table-column v-if="$hasPermission(mixinViewModuleOptions.updateUrl) || $hasPermission(mixinViewModuleOptions.deleteUrl)"
                         label="操作"
                         header-align="center"
                         align="center"
                         width="150">
          <template slot-scope="scope">
            <el-button v-if="$hasPermission(mixinViewModuleOptions.updateUrl)"
                       type="warning"
                       @click="initDialog('addUpdateDialogRef',scope.row)"
                       size="mini">修改</el-button>
            <el-button v-if="$hasPermission(mixinViewModuleOptions.deleteUrl)"
                       type="danger"
                       @click="deleteHandle(scope.row,scope.row.username)"
                       size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 新增修改弹框 -->
      <AddUpdateForm ref="addUpdateDialogRef"
                     :addUrl="mixinViewModuleOptions.addUrl"
                     :updateUrl="mixinViewModuleOptions.updateUrl"
                     :getDataList="getDataList" />
    </div>
    <!-- 右边信息-end -->
    <!-- 页脚-start -->
    <div slot="footer">
      <vxe-pager border
                 align="left"
                 :current-page="page"
                 :page-size="limit"
                 :total="total"
                 :layouts="layouts"
                 @page-change="handlePageChange" />
    </div>
    <!-- 页脚-end -->
  </zero-container>
</template>

<script>
import mixinViewModule from '@/mixins/view-module' // 分页相关js
import AddUpdateForm from './components/AddUpdateForm' // 添加修改模块
export default {
  name: 'SysRole',
  mixins: [mixinViewModule],
  components: {
    AddUpdateForm
  },
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListUrl: '/sysRole/pageList',
        addUrl: '/sysRole/add',
        updateUrl: '/sysRole/update',
        deleteUrl: '/sysRole/del'
      },
      showColumns: {
        name: { label: '角色名称', show: true },
        state: { label: '角色状态', show: true },
        createTime: { label: '创建时间', show: true },
        updateTime: { label: '修改时间', show: true },
        remarks: { label: '备注', show: true }
      }
    }
  },
  methods: {
    changeState (row) {
      // 修改状态
      this.dataListLoading = true
      const params = {
        id: row.id,
        state: row.state
      }
      const config = {
        url: '/sysRole/updateState',
        method: 'get',
        params: params
      }
      this.$axios(config)
        .then(res => {
          this.dataListLoading = false
          this.$message.success(res.msg)
          this.getDataList()
        })
        .catch(() => {
          this.dataListLoading = false
        })
    }
  }
}
</script>
